<template>
  <div class="uploadProduct">
    <div>
      <el-button size="mini" @click="handleForm">刷新</el-button>
      <el-button size="mini" type="primary" @click="commity">提交商品</el-button>
    </div>
    <div class="center">
      <p>商品信息</p>
      <div>
        <jc-form :option-value="basicValue" :options="basic" />
      </div>
      <p class="commImg">企划图片</p>
      <div class="modityImg modityImg1">
        <jc-upload
          :image-url.sync="fimg1"
          :required="false"
          master
          class="spacing"
        />
        <jc-upload
          :image-url.sync="fimgdetail"
          :required="false"
          class="spacing"
        />
      </div>
      <p class="commImg">商品图片</p>
      <div class="modityImg">
        <jc-upload
          :image-url.sync="imgArr.fimg"
          :required="false"
          master
          class="spacing"
        />
        <jc-upload
          :image-url.sync="imgArr.fworkImg"
          :required="false"
          class="spacing"
        />
        <jc-upload
          :image-url.sync="imgArr.fworkImg1"
          :required="false"
          class="spacing"
        />
        <jc-upload
          :image-url.sync="imgArr.fworkImg2"
          :required="false"
          class="spacing"
        />
        <jc-upload
          :image-url.sync="imgArr.fworkImg3"
          :required="false"
          class="spacing"
        />
      </div>
      <p>商城显示</p>
      <div>
        <el-checkbox-group v-model="checkedCommity">
          <el-checkbox v-for="item in commityArr" :key="item.fid" :label="item.fvlaue">{{ item.fname }}</el-checkbox>
        </el-checkbox-group>
      </div>
      <p class="commImg">商品详情图片</p>
      <div class="modityImg">
        <jc-upload
          :image-url.sync="imgArr.fimgdetails"
          :required="false"
          class="spacing"
        />
        <jc-upload
          :image-url.sync="imgArr.fimgdetails1"
          :required="false"
          class="spacing"
        />
        <jc-upload
          :image-url.sync="imgArr.fimgdetails2"
          :required="false"
          class="spacing"
        />
        <jc-upload
          :image-url.sync="imgArr.fimgdetails3"
          :required="false"
          class="spacing"
        />
        <jc-upload
          :image-url.sync="imgArr.fimgdetails4"
          :required="false"
          class="spacing"
        />
      </div>
      <p class="commImg">
        商品视频
        <el-button type="danger" size="mini" @click="videos=''">{{ $t('shop.delete') }}</el-button>
      </p>
      <div class="modityImg" style="margin-bottom: 20px;">
        <jc-upload
          v-if="!videos"
          :image-url.sync="videos"
          :required="false"
          video
          class="spacing"
        />
        <video v-else :src="videos" controls style="max-width: 300px" />
      </div>
    </div>
  </div>
</template>

<script>
import jcUpload from '@/components/Upload'
import { queryMaretMaterial, updateMaterialImage, queryMaret } from '@/api/marketManage/saleReport'
import jcForm from '@/components/Form'

export default {
  components: {
    jcUpload,
    jcForm
  },
  data() {
    return {
      basicValue: {},
      basic: {
        fname: { label: this.$t('shop.fname2'), span: 8, disabled: 'disabled' },
        fmodel: { label: this.$t('market.fmodel'), span: 8, disabled: 'disabled' },
        fnumber: { label: this.$t('market.fmaterial'), span: 8, disabled: 'disabled' },
        fspecificaTion: { label: this.$t('shop.fspecificaTion'), span: 8, disabled: 'disabled' },
        fbaseUnitName: { label: this.$t('market.baseUnit'), span: 8, disabled: 'disabled' },
        fdescripTion: { label: this.$t('market.fdescripTion'), labelWidth: '100px', disabled: 'disabled', type: 'textarea', span: 24 }
      },
      ftypea: '',
      ftypeb: '',
      fimgdetail: '',
      fimg1: '',
      imgArr: {},
      videos: '',
      checkedCommity: [],
      commityArr: []
    }
  },
  created() {
    this.handleForm()
    this.commityMaret()
  },
  methods: {
    // 提交
    async commity() {
      const DATA = {
        fmaterialId: this.basicValue.fmaterialId,
        ...this.imgArr,
        fimgdetail: this.fimgdetail,
        fimg1: this.fimg1,
        videos: this.videos,
        fmarket: this.checkedCommity
      }
      const { code, message } = await updateMaterialImage(DATA)
      if (code !== 0) {
        this.$message.warning({ message })
        return
      } else {
        this.handleForm()
        this.$message({ showClose: true, message: message, type: 'success' })
      }
    },
    // 商城显示
    async commityMaret() {
      const { data, code, message } = await queryMaret({})
      if (code !== 0) {
        this.$message.warning({ message })
        return
      }
      this.commityArr = data
    },
    // 获取表单
    async handleForm(ev) {
      const fnumber = this.$route.params.id || ev
      if (!fnumber) {
        return
      }
      const { data: RES } = await queryMaretMaterial({
        fnumber: fnumber
      })
      const {
        fmodel,
        fbaseUnitName,
        ferpcls,
        fremarks,
        fspecificaTion,
        fname,
        fdescripTion,
        fmaterialId,
        fimg,
        fimg1,
        fimgdetail,
        fworkImg,
        fworkImg1,
        fworkImg2,
        fworkImg3,
        fimgdetails,
        fimgdetails1,
        fimgdetails2,
        fimgdetails3,
        fimgdetails4,
        fmarket,
        videos
      } = RES
      this.basicValue = {
        fmaterialId,
        fmodel,
        fnumber,
        fspecificaTion,
        fbaseUnitName,
        ferpcls,
        fremarks,
        fname,
        fdescripTion
      }
      this.videos = videos
      this.fimgdetail = fimgdetail
      this.fimg1 = fimg1
      fmarket instanceof Array ? this.checkedCommity = fmarket : this.checkedCommity = []
      this.imgArr = {
        fimg,
        fworkImg,
        fworkImg1,
        fworkImg2,
        fworkImg3,
        fimgdetails,
        fimgdetails1,
        fimgdetails2,
        fimgdetails3,
        fimgdetails4
      }
    }
  }
}
</script>

<style scoped lang="scss">
.uploadProduct {
  padding: 10px;
  background: #FFFFFF;
  min-height: calc(100vh - 100px);
  .center {
    width: 1000px;
    margin: auto;
    p {
      margin: 16px 0 8px;
    }
    .commImg {
      margin-top: 20px;
    }
    .modityImg {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .modityImg1 {
      justify-content: flex-start;
      .spacing {
        width: 21%;
      }
    }
  }
}
</style>
